html ,body {
    padding: 0;
    margin: 0;
    background-color: #333;
    color:#fff;
}
.title-contaner { 
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .box {
        .icon {
            width: 150px;
            height: 150px;
        }
    }
}

.msg {
    display: flex;
    justify-content: center;
}

.box-container {
    margin: 0 auto;
    margin-top: 20px;
    // display: flex;
    // flex-wrap: wrap;
    width: 660px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

@media only screen and (max-width: 600px) {
    .box-container {
        width: 100%;
        padding: 0 20px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (max-width: 400px) {
    .box-container {
        width: 100%;
        padding: 0 20px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

.box {
    cursor: pointer;
    display: block;
    margin:20px;
    text-decoration: none;
    color:#eee;
    border:1px solid rgba($color: #fff, $alpha: 0);
    &:hover {
        border:1px solid rgba($color: #fff, $alpha: 0.5);
        border-radius: 10px;
        box-shadow:2px 2px 5px #e4c9c94a;
        .box-title {
            //font-size: 14px;
            font-weight: bolder;
        }
        .icon {
            background-color: rgba($color: #fff, $alpha: 0.7);
            //transform: rotate3d(0,0.2,0.2,30deg);
        }
    }
    div {
        transition: all .25s;
    }
    .icon {
        width: 88px;
        height: 88px;
        background-color: rgba($color: #fff, $alpha: 0.5);
        backdrop-filter: blur(30px)!important;
        border-radius: 10px;
        img {
            border-radius: 10px;
            width: 100%;
            height: 100%;
        }
        &.mirror {
            filter: grayscale(50%) invert(20%) blur(0px);
            transform: rotateY(180deg);
        }
    }
    .box-title{
        font-size: 15px;
        padding: 5px 0;
        text-align: center;
    }

}

.tooltip {
    display:inline-block;
    position:relative;
    border-bottom:1px dotted #666;
    text-align:left;
}

.tooltip .top {
    min-width:200px; 
    top:-20px;
    left:50%;
    transform:translate(-50%, -100%);
    padding:10px 20px;
    color:#444444;
    background-color:#EEEEEE;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    display:none;
}

.tooltip:hover .top {
    display:block;
}

.tooltip .top i {
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.tooltip .top i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#EEEEEE;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}
